<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: 500px;
}

.portlet-default {
	padding:15px;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	margin-top: 20px;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
</head>
<body>
	<div id="app" class="app">
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:用户详情"></span>
			</h4>
			<hr class="border-t-a">
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
			label-width="100px" class="demo-ruleForm"> 
			<el-container>
		<el-aside width="180px"> 
		<el-upload class="avatar-uploader"
			action="/userwjlfile" :show-file-list="false"
			:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
		<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i> 
		</el-upload>
		 </el-aside>
		 <el-main>
		<el-form-item label="姓名:" prop="username"> <el-col
			:span="9"> <el-input type="input" autosize
			v-model="ruleForm.username"></el-input> </el-col> <el-col class="line"
			:span="4" :offset="1" style="color: #8c939d;">登录名：</el-col> <el-col :span="9">
		<el-input type="input" autosize v-model="ruleForm.loginname"></el-input>
		</el-col>
		 </el-form-item> 
		<el-form-item label="手机："> 
		<el-col :span="9">
		<el-form-item prop="userphone">
		 <el-input type="input" autosize v-model="ruleForm.userphone"></el-input>
		  </el-form-item> 
		  </el-col> 
		  <el-col class="line"
			:span="4" :offset="1" style="color: #8c939d;">部门：</el-col>
		  <el-col :span="9"> 
		    <el-select autosize v-model="ruleForm.dept" @change="selectChangedept"> 
		    <el-option label="部门" :value="0"></el-option>
		     <el-option v-for="item in treeListDatase" :label="item.dep_name" :value="item.dep_id"></el-option> 
		     </el-select>
		   </el-col>
		    </el-form-item> 
		   <el-col :span="14" >
		  	  <el-form-item label="角色：" prop="role"> 
		  <el-select autosize	v-model="ruleForm.role" @change="selectChange">
		   <el-option v-for="item in treeListData" :label="item.rol_name" :value="item.rol_id"></el-option> 
		   </el-select> 
		      </el-form-item> 
		   </el-col>		
		     <br />
		<el-form-item prop="useid"> <el-input v-show="false"
			v-model="ruleForm.useid"></el-input> </el-form-item> 
			<el-form-item>
		<el-button @click="resetForm('ruleForm')">取消</el-button> <el-button
			type="primary" @click="submitForm('ruleForm')">保存</el-button> </el-form-item>
			</el-main> </el-container> 
			 </el-form>
	</div>
	<script>
			var vm = new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						treeListData:[],
						treeListDatase:[],
						ruleForm: {
							imageUrl:'',
							username: '',
							loginname: '',
							userphone: '',
							role: '',
							dept: ''
						},
						//验证规则
						rules: { //数据源model
							username: [{
									required: true,
									message: '用户名不能为空',
									trigger: 'blur'
								}
							],
							loginname:[{required: true,
								message: '登录名不能为空',
								trigger: 'blur'}],
							userphone:[{
									required: true,
									message: '电话不能为空',
									trigger: 'blur'
							},
							{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
							   {pattern: /^1[34578]\d{9}$/, message: '手机号格式错误'}
							]
								
						}
					};
									},
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/setRefromUser",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									alert("修改成功");
									window.location.replace("/updateusers");
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
						window.close();
						parent.location.reload();
					},
					resetForm(formName) {
						/* this.$refs[formName].resetFields(); */
						window.close();
						parent.location.reload();
					},
					handleSelect: function(it) {
						console.log(it)
					},
					selectChangedept:function(){
						
					},
				},
				mounted() {
					var linkman = ${linkmanaaa};
					var list=this.treeListData
					 var listse=this.treeListDatase
						if(linkman){
							var news = ${linkmanaaa};						
						}
						//console.log(linkman);
					this.ruleForm.username = news.usrdept.use_name;
					this.ruleForm.loginname = news.userlogin;
					this.ruleForm.userphone = news.usrdept.us_phone;					
					this.ruleForm.role = news.userrole;
					this.ruleForm.dept = news.usrdept.dep_name;
					this.treeListData=news.roleallname;
					this.treeListDatase=news.deptallname;	 
					this.ruleForm.useid=news.usrdept.use_id;
				 	this.ruleForm.imageUrl=".."+news.usrdept.use_img;
					//alert(news.userrole);
					//alert(this.ruleForm.imageUrl);
				//	console.log(this.ruleForm.imageUrl+"          imageUrl ");
				}
			});
		</script>
</body>
</html>